<template>
  <div id="list" v-for="(item, index) in Info" :key="index">
    <div>
      <div id="title" @click="gotoCoPage(item)">
        <LayoutOutlined style="margin-right: 5px" />
        {{ item.filename }}
      </div>
      <div>收录{{ item.articlesNum }}篇文章 {{ item.fansNum }}人关注</div>
    </div>
    <a-button @click="doAsFollow(item)">关注</a-button>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { LayoutOutlined } from "@ant-design/icons-vue";
import { getAttColls } from "../../api/showUser";
import { message } from "ant-design-vue";
import { att_on_coll } from "../../api/showPage";
import { useRouter } from "vue-router";

export default defineComponent({
  components: { LayoutOutlined },

  setup() {
    const router = useRouter();
    let Info = ref([]);

    const gotoCoPage = (item) => {
      router.push({ path: "/collectionsPage", query: { cid: item.cid } });
    };

    getAttColls({
      url: "/showUsers/getAttColls",
      userid: sessionStorage.getItem("userID"),
      success: (res) => {
        // console.log(res.data);
        Info.value = res.data;
        // message.info(res.data);
      },
      err: (err) => {
        console.log(err);
      },
    });

    const doAsFollow = (item) => {
      att_on_coll({
        url: "/showPage/att_on_coll",
        cid: item.cid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    return {
      Info,
      doAsFollow,
      gotoCoPage,
    };
  },
});
</script>

<style scoped>
#list {
  height: 80px;
  margin: 0 10px 0 10px;
  border-bottom: 1px solid rgb(189, 189, 189, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#title {
  font-size: 20px;
}
#title:hover {
  color: #005177;
  cursor: pointer;
}
</style>